<template>
  <div id="nav">
    <router-link v-for="(route) in routesAry" class="ml-10" :key="route.name" :to="route.path"> {{route.name}} | </router-link>
    <!-- <router-link to="/">Home1112</router-link> |
    <router-link to="/about">About111</router-link> -->
    <router-view/>
  </div>
</template>
<script>
import { onMounted, defineComponent, getCurrentInstance, reactive } from 'vue'
import { routes } from './router'
export default defineComponent({
  name: 'App',
  data () {
    return {
    }
  },
  setup () {
    // 可以在组件用通过 getCurrentInstance() 来获取全局globalProperties 中配置的信息, getCurrentInstance 方法获取当前组件的实例，然后通过 ctx 属性获得当前上下文，这样我们就能在setup中使用router和vuex, 通过这个属性我们就可以操作变量、全局属性、组件属性等等
    const demo = getCurrentInstance()
    console.log(demo)
    console.log(routes, 12222)
    onMounted(() => {
    })
    // const routesAry = ref([])
    // routes.forEach(e => {
    //   const ob = reactive({
    //     name: e.name,
    //     path: e.path
    //   })
    //   routesAry.value.push(ob)
    // })
    // console.log(routesAry)
    return {
      routesAry: reactive(routes)
    }
  }
})
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
